<template>
    <el-select v-model="model" placeholder="选择用户" multiple :loading="isLoading !== 0" v-bind="$attrs">
        <template #header>
            <div>
                <el-input
                    v-model.trim="keyword"
                    placeholder="请输入用户ID/用户名/邮箱"
                    clearable
                    @input="getUserList"
                ></el-input>
            </div>
        </template>
        <template #default>
            <el-option
                v-for="item in userOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.id === userStore.userId"
            >
                <div style="display: flex">
                    <el-avatar :src="item.avatar" :size="30" style="margin-right: 10px"></el-avatar>
                    <span class="name" style="margin-right: 10px">
                        {{ item.name }}
                    </span>
                    <span class="id" style="margin-right: 10px">
                        {{ item.id }}
                    </span>
                </div>
            </el-option>
        </template>
        <template #loading>
            <el-icon class="is-loading">
                <svg class="circular" viewBox="0 0 20 20">
                    <g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none">
                        <circle r="3.375" class="dot1" rx="0" ry="0" />
                        <circle r="3.375" class="dot2" rx="0" ry="0" />
                        <circle r="3.375" class="dot4" rx="0" ry="0" />
                        <circle r="3.375" class="dot3" rx="0" ry="0" />
                    </g>
                </svg>
            </el-icon>
        </template>
    </el-select>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
// 引入防抖
import { debounce } from "lodash";
// 引入接口
import { reqUserList } from "@/api/user";
// 引入仓库
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const model = defineModel();
// 选择框的选项
// eslint-disable-next-line no-undef
const userOptions = ref<User[]>([]);
// 加载态的控制（使用数字是为了防止前面的请求取消了后面请求的加载态）
const isLoading = ref<number>(0);
// 记录搜索框的字段
const keyword = ref("");
// 定义一个中断控制器
const controller = ref(new AbortController());
// 使用防抖
const getUserList = debounce(async () => {
    // 取消上一次请求
    controller.value.abort();
    // 如果关键字为空直接清空内容即可
    if (keyword.value === "") {
        userOptions.value = [];
        return;
    }
    // 请求数量自增
    isLoading.value++;
    // 重新生成控制器
    controller.value = new AbortController();
    // 因为接口复用的搜索接口，所以limit设置为一个大值，以便数据可以返回
    const result = await reqUserList(
        {
            keyword: keyword.value,
            pageNo: 1,
            limit: 9999,
        },
        controller.value.signal,
    );
    // 请求数量自减
    isLoading.value--;
    if (result.code === 0) {
        // 请求中断
        return;
    } else if (result.code === 200 && typeof result.data === "object") {
        // 获取数据成功
        userOptions.value = result.data.list;
    } else {
        // 获取数据失败
        ElMessage.error(result.data as string);
    }
}, 500);
</script>

<style lang="scss">
.el-select-dropdown__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 100px;
    font-size: 20px;
}

.circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
}
.loading-path .dot1 {
    transform: translate(3.75px, 3.75px);
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
}
.loading-path .dot2 {
    transform: translate(calc(100% - 3.75px), 3.75px);
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 0.4s;
}
.loading-path .dot3 {
    transform: translate(3.75px, calc(100% - 3.75px));
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 1.2s;
}
.loading-path .dot4 {
    transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 0.8s;
}
@keyframes loading-rotate {
    to {
        transform: rotate(360deg);
    }
}
@keyframes custom-spin-move {
    to {
        opacity: 1;
    }
}
</style>
